<template>
    <div>
      <!-- 1.完整写法: v-on:监听的事件="methods中方法" -->
      <button v-on:click="btn1Click">监听按钮单击(完整写法)</button>
      <div class="area" v-on:mousemove="mouseMove">监听鼠标移动事件</div>
      <!-- 2.语法糖 -->
      <button @click="btn1Click">监听按钮单击(简写)</button>
      <!-- 3.绑定一个表达式: inline statement -->
      <button @click="counter++">单击+1： {{ counter }}</button>
      <!-- 4.绑定一个对象 -->
      <div class="area" v-on="{ click: btn1Click, mousemove: mouseMove }">监听鼠标移动事件</div>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vonbase',
    data() {
      return {
        counter: 100
      }
    },
    methods: {
      btn1Click() {
        console.log('按钮1发生了单击')
      },
      mouseMove() {
        console.log('鼠标移动')
      }
    }
  }
  </script> -->
  <script setup>
  defineOptions({
    name: 'vonbase'
  })
  import { ref } from 'vue'
  const counter = ref(100)
  const btn1Click = () => {
    console.log('按钮1发生了单击')
    counter.value++
  }
  const mouseMove = () => {
    console.log('鼠标移动')
  }


  </script>
  <style lang="scss" scoped></style>
  